<script setup lang="ts">
import {reactive, ref} from "vue";
import {type FormInterface} from "./formType";
import type {FormInstance} from "element-plus";
const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const rules = {
  name: [
    {required: true, message: '请输入角色名称', trigger: 'blur'},
    {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
  ],
}
const props = defineProps({
  api : {
    type: Object,
    required: true
  }
})
const form = reactive<FormInterface>({
  id: '',
  name: '',
  permissionIds: undefined,
})
const openDialog = (row?: FormInterface) => {
  dialogVisible.value = true
  Object.assign(form, {
    id : row?.id || '',
    name : row?.name || '',
    permissionIds : row?.permissionIds || [],
  })
}
const submit =  () => {
   ruleFormRef.value?.validate(async (valid, fields) => {
    if (valid) {
      let res = form.id === '' ?  await props.api.create(form) :  await props.api.update(form)
      console.log(res)
    } else {
      console.log('error submit!', fields)
    }
  })

}


const value = ref()

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

defineExpose({openDialog})
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      :title="form.id === '' ? '新增' : '编辑'"
      width="30%"
  >
  <el-form :model="form" label-width="80px"  :rules="rules" ref="ruleFormRef">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name"  />
    </el-form-item>
    <el-form-item label="角色权限" prop="permissionIds">
      <el-tree-select
          v-model="form.permissionIds"
          :data="data"
          multiple
          :render-after-expand="false"
          show-checkbox
          style="width: 240px"
      />
    </el-form-item>
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit"
        >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>